<template>
  <herin-container title="井下工作进度分析" :delay="1" direction="Right">
    <template #content>
      <div class="work-progress">
        <navCard :nav-card-list="navCardList" :nav-cinfig="navCinfig" />
        <div class="chart-wrap">
          <div class="title">
            <div>近七天每日原煤产量</div>
            <div class="line" />
          </div>
          <div class="line-chart">
            <LineChart
              :chart-data="chartData"
              :color="['#2FB7EB']"
              :text="['每日原煤产量']"
              unit="吨"
              :s-text="['每日原煤产量']"
              :area="true"
            />
          </div>
        </div>
        <div class="progress-wrap">
          <div class="progress-title">
            <div>工作进度分析</div>
            <div class="tab">
              <div
                v-for="(t, index) in tab"
                :key="index"
                class="tab-item"
                :class="{ active: curIndex === index }"
                @click="changeTab(index)"
              >
                {{ t }}
              </div>
            </div>
          </div>

          <div class="progress-content">
            <div v-for="(item, index) in progressList" :key="index" class="progress-item">
              <div class="infos">
                <div class="infos-left">
                  <div>{{ item.device }}工作面</div>
                  <!-- 先这么修改吧 -->
                  <div class="info">
                    进度{{ (((item.output || 0) / (item.planOutput || item.output || 1)) * 100).toFixed(1)
                    }}%
                  </div>
                </div>
                <div class="infos-right">
                  <div>今日推进&nbsp;{{ item.length }}&nbsp;米</div>
                  <div class="info">{{ item.knives || 0 }}刀 {{ item.rack || 0 }}架</div>
                  <div>
                    {{ unitConverter(item.output || 0)[0] | numFormat }}{{ unitConverter(item.output || 0)[1] }}
                  </div>
                </div>
              </div>
              <!-- <div class="progress">
                <div class="complete-box" :style="{ width: (item.output || 0 / largeNum) * 100 + '%'}">
                  <div v-for="i in 20" :key="i" class="inner-box" />
                </div>
              </div> -->
              <progress-bar
                cell-height="0.25rem"
                :percent="(((item.output || 0) / (item.planOutput || item.output || 1)) * 100) + '%'"
                size="0.86rem"
              />
            </div>
          </div>
        </div>
      </div>
    </template>
  </herin-container>
</template>

<script>

import HerinContainer from '@/components/HerinContainer.vue';
import LineChart from '@/components/chart/line/LineChart.vue';
import navCard from './common/navCard.vue';
import ProgressBar from './common/ProgressBar.vue';
export default {
  components: {
    HerinContainer,
    LineChart,
    navCard,
    ProgressBar
  },

  data() {
    return {
      tab: ['今日', '当月'],
      curIndex: 0,
      navCinfig: {
        cardWidth: 160,
        cardHeight: 63,
        numColor: '#FFD101',
        hasEvent: false
      }
    };
  },

  computed: {
    navCardList() {
      const todayOutput = this.$store.state.dispath.dispathData.underRate;
      const monthOutput = this.$store.state.dispath.dispathData.monthTotalOutput;
      return [
        { navTitle: '今日累计产量', num: todayOutput, navIcon: require('@/assets/img/dispath/output.png'), unit: '吨' },
        { navTitle: '当月累计产量', num: monthOutput, navIcon: require('@/assets/img/dispath/output.png'), unit: '吨' }
      ];
    },
    chartData() {
      const data = [...this.$store.state.dispath.dispathData.dayYield].sort((a, b) => {
        return +new Date(a.x) - +new Date(b.x);
      });
      return data.map(it => {
        return {
          x: it.coalDateStr,
          y: it.dayOutput,
          s: '每日原煤产量'
        };
      });
    },
    progressList() {
      return this.$store.state.dispath.dispathData.currRate;
    },
    largeNum() {
      const numArr = [];
      this.progressList.forEach(item => {
        numArr.push(item.output || 0);
      });
      return Math.max(...numArr);
    }
  },

  methods: {
    changeTab(index) {
      this.curIndex = index;
      // this.$store.commit('setWebToServer', {
      //   socketFunName: 'DISPATCH_WEB',
      //   socketParams: {
      //     coalFre: this.curIndex ? 'MONTH' : 'DAY'
      //   }
      // });
    },

    unitConverter(num) {
      num = Number(num);
      if (Math.abs(num) > 100000) {
        return [Number(num / 10000), ' 万吨'];
      } else {
        return [num, ' 吨'];
      }
    }
  }

};
</script>

<style lang="scss" scoped>
.herin-container {
  margin-bottom: .625rem;
  .work-progress {
    .title-wrap {
      display: flex;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 10rem;
        height: 3.9375rem;
        padding: .5rem 0;
        background-color: $itemBg;
        border-radius: 0.25rem;
        color: $light3Grey;
        font-size: $commonContentText ;

        .title-row {
          display: flex;
          align-items: center;

          img {
            width: 0.875rem;
            height: 0.875rem;
            margin-right: 0.3125rem;
          }
        }

        .num {
          font-size: $smallHeadingsText;
          color: $yellow;
        }
      }
    }

    .chart-wrap {
      display: flex;
      height: 10.25rem;
      flex-direction: column;
      // flex: 1;
      margin-top: .625rem;

      .title {
        display: flex;
        justify-content: space-between;
        font-size: $auxiliaryText;
        color: $light2Grey;
        height: 0.875rem;
        line-height: 0.875rem;

        .line {
          flex: 1;
          height: 0.5rem;
          border-bottom: 0.0625rem dashed $lightGrey;
          margin-left: 0.625rem;
        }
      }

      .line-chart {
        margin-top: .75rem;
        // flex: 1;
        height:10.25rem;
      }
    }

    .progress-wrap {
      margin-top: 0.625rem;

      .progress-title {
        display: flex;
        justify-content: space-between;
        height: 1.125rem;
        line-height: 1.125rem;
        font-size: $auxiliaryText;
        color: $light2Grey;

        .tab {
          display: flex;
          .tab-item {
            font-size: .75rem !important;
            color: rgba(255, 255, 255, 100);
            margin:0 .1875rem;
            padding: 0 .3125rem;
            width: 2.125rem;
            text-align: center;
            height: 1rem;
            line-height: 1rem !important;
            background: rgba(232, 232, 232, 0.2);
          }
          .active{
            font-size: .75rem;
            color: #02E4FF;
            background-color: rgba(2, 228, 255, 0.2);
          }
        }
      }

      .progress-content {
        margin-top: .75rem;

        .progress-item:not(:last-child) {
          margin-bottom: 0.625rem;
        }

        .progress-item {
          height: 4.375rem;
          // margin-bottom: .3125rem;
          background-color: $itemBg;
          border-radius: 0.25rem;
          padding: .4375rem;
          font-size: $auxiliaryText;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .infos {
            // display: flex;
            // justify-content: space-between;
            color: $lightGrey;
            height: 0.75rem;
            line-height: 0.75rem;

            .infos-left {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              .info {
                margin-left: 1.25rem;
                color: $cyan;
              }
            }

            .infos-right {
              display: flex;
              color: $light3Grey;
              justify-content: space-between;
              margin-bottom: 10px;
              .info {
                margin-right: 1.25rem;
                color: $light4Grey;
              }
            }
          }

          // .progress{
          //   width: 19.5rem;
          //   overflow-x: hidden;
          //   .complete-box{
          //     display: flex;
          //     align-items: center;

          //     height: .5rem;

          //     border: 0.0625rem solid $green;
          //     box-sizing: border-box;
          //     overflow-x: hidden;
          //     .inner-box{
          //       flex-shrink:0;

          //       margin-left: .0625rem;
          //       width: .9375rem;
          //       height: .25rem;

          //       background:$green;
          //     }
          //   }
          // }
        }
      }
    }
  }
}
</style>
